<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="846px"
      title="导出"
      wrapClassName="work-modal-container"
      @cancel="closeModal()"
    >
      <div class="modal-body-container" v-loading="loading">
        <a-checkbox-group
          v-model="choosedKeys"
          name="checkboxgroup"
          :options="noChoosedList"
        />
      </div>
      <div class="modal-footer-container">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" @click="save()" :loading="buttonLoading">
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { downLoadFileByArraybuffer, getNowDateStr } from "@/utils";
import { getBoxFields, exportLedgerData } from "@/api/wisdom-beam/ledger.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      choosedKeys: [],
      noChoosedList: [],
      loading: false,
      buttonLoading: false,
    };
  },
  methods: {
    getData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        getBoxFields()
          .then((res) => {
            let { data } = res;
            this.noChoosedList = data?.result ?? [];
            this.choosedKeys = this.noChoosedList.map((v) => v.value);
            this.noChoosedList.forEach((v) => {
              let { name } = v;
              v.label = name;
            });
            let keys = [
              "bridgeName",
              "unite",
              "model",
              "amClass",
              "componentParts",
            ];
            this.noChoosedList.forEach((v) => {
              this.$set(v, "disabled", keys.includes(v.value));
            });
            resolve();
          })
          .catch((_) => {
            this.noChoosedList = [];
            this.choosedKeys = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //批量导出
    save() {
      let { componentParts, beamType, state } = this.$parent.$data;
      this.buttonLoading = true;
      exportLedgerData({
        componentParts: componentParts || "",
        completeStatus: state?.key,
        beamType: beamType?.key,
        keys: this.choosedKeys.toString(),
      })
        .then((data) => {
          downLoadFileByArraybuffer(data, "生产台账" + getNowDateStr());
          this.closeModal();
        })
        .finally((_) => {
          this.buttonLoading = false;
        });
    },

    //关闭弹框
    closeModal() {
      this.choosedKeys = this.noChoosedList.map((v) => v.value);
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.work-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .modal-body-container {
    padding: 20px 20px 20px 20px;
    max-height: 700px;
    .custom-scrollbar();
    //多选框
    .ant-checkbox-group {
      .ant-checkbox-group-item {
        margin-right: 0;
        margin-bottom: 10px;
      }
      label {
        width: 25%;
      }
      .ant-checkbox-disabled + span {
        color: rgba(0, 0, 0, 0.65);
      }
    }
  }
  .modal-footer-container {
    text-align: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
